
<template>  
  <div>  
    <h1>自律一下</h1>
    <input type="text" v-model="newTodoTitle" @keyup.enter="addTodo" placeholder="添加新的待办事项" />  
    <ul>  
      <TodoItem  
        v-for="(todo, index) in todos"  
        :key="index"  
        :title="todo.title"  
        :completed="todo.completed"  
        @update:completed="updateTodoCompleted(index, $event)"  
        @remove-todo="removeTodo(index)"  
      />  
    </ul>  
  </div>  
</template>  
  
<script>  
import TodoItem from './TodoItem.vue';  
  
export default {  
  components: {  
    TodoItem  
  },  
  data() {  
    return {  
      todos: [  
        { title: '复习计算机知识', completed: false },  
        { title: '游泳60分钟', completed: false },  
        { title: '跑步20分钟', completed: false },  
      ],  
      newTodoTitle: ''  
    };  
  },  
  methods: {  
    addTodo() {  
      if (!this.newTodoTitle.trim()) return;  
      this.todos.push({ title: this.newTodoTitle, completed: false });  
      this.newTodoTitle = '';  
    },  
    removeTodo(index) {  
      this.todos.splice(index, 1);  
    },  
    updateTodoCompleted(index, completed) {  
      this.todos[index].completed = completed;  
    }  
  }  
};  
</script>  
  
<style scoped>   
</style>